<template>
  <div class="planMaintain">
    <el-dialog :title="option.title"  :visible.sync="isShow" :close-on-click-modal="false" width="60%" @close="closeDialog" @open="openDialog">
      <el-card v-loading="loading">
        <el-form :model="ruleForm" size="small" label-position="left" ref="ruleForm" label-width="37%" class="demo-ruleForm">
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="排班类型" prop="SCHEDULETYPE">
                <el-select v-model="ruleForm.SCHEDULETYPE" placeholder="请选择排班类型">
                  <el-option
                    v-for="item in SCHEDULETYPE"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="重新排班选项" prop="SCHEDULEOPTION">
                <el-select v-model="ruleForm.SCHEDULEOPTION" placeholder="请选择重新排班选项">
                  <el-option
                    v-for="item in SCHEDULEOPTION"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <div style="margin-bottom: 5px;">
                <p class="myp">优先考虑缺员</p>
                <el-slider :min="1" :max="99" v-model="ruleForm.MANPRIORTYPE"></el-slider>
                <p class="myp" style="text-align: right;">优先考虑超员</p>
              </div>
            </el-col>
            <el-col :span="24">
              <div style="margin-bottom: 5px;">
                <p class="myp">优先考虑服务水平</p>
                <el-slider v-model="ruleForm.SERVICEPRIORTYPE"></el-slider>
                <p class="myp" style="text-align: right;">优先考虑偏好</p>
              </div>
            </el-col>
             <el-col :span="24">
               <div style="margin-bottom: 5px;">
                <p class="myp" style="width:190px;">是否忽略排班警告并继续排班</p>
                <el-checkbox v-model="ruleForm.WARNANDDONE" 
                  true-label='1' false-label='0' 
                  style="display: inline-block;vertical-align: bottom;">
                </el-checkbox>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <div slot="footer" class="dialog-footer">
        <el-button @click="option.isShow=false;" size="mini">取 消</el-button>
        <el-button type="primary" @click="confirmClick('ruleForm')" size="mini">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import request from "@/common/utils/requestWFMClass";
import scheduleGen from "@/message/wfm/intelligenceSchedule/scheduleReport/scheduleGen";

export default {
  props: { option: Object },
  components: {
    // selectTree
  },
  data() {
    return {
      loading:false,
      ruleForm:{
        SCHEDULETYPE: '',
        SCHEDULEOPTION: '',
        MANPRIORTYPE: 1,
        WARNANDDONE: '',
        SERVICEPRIORTYPE: 1,
      },
      SCHEDULETYPE: [{
        value: 'daily',
        label: '日常排班'
      },{
        value: 'ot',
        label: 'OT排班'
      }],
      SCHEDULEOPTION: [{
        value: 'clear',
        label: '清空已有排班数据后重新排班'
      },{
        value: 'retain',
        label: '保留原有排班数据后追加排班'
      },],
      PERIODTYPE: '',
    }
  },
  computed: {
    isShow: {
      get() {
        return this.option.isShow;
      },
      set(value) {
        this.option.isShow = value;
      }
    }
  },
  mounted(){
    // this.queryClass();
  },
  methods: {
    openDialog() {
      if (this.$refs['ruleForm'] != undefined) {
        this.$refs['ruleForm'].clearValidate();
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.$refs['ruleForm'].clearValidate();
    },
    confirmClick(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.setALgorithm();
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    async setALgorithm(){
      this.loading= true
      let resBody = new scheduleGen();
      resBody.data.SPID = this.option.SPID;
      resBody.data.AGENTLIST = this.option.checkedRole.join(',');
      resBody.data.SCHEDULETYPE = this.ruleForm.SCHEDULETYPE;
      resBody.data.SCHEDULEOPTION = this.ruleForm.SCHEDULEOPTION;
      resBody.data.MANPRIORTYPE = this.ruleForm.MANPRIORTYPE+'';
      resBody.data.WARNANDDONE = this.ruleForm.WARNANDDONE;
      resBody.data.SERVICEPRIORTYPE = this.ruleForm.SERVICEPRIORTYPE+'';
      let response = await request(resBody);
      if (response.SYS_HEAD.ReturnCode == "000000") {
        this.loading= false
        this.$message({
          type: "success",
          message: "设置成功"
        });
        this.option.isShow = false;
      } else {
        this.$message({
          type: "error",
          message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
        });
      }
    },
    //关闭弹窗
    closeDialog() {
      this.loading=false
      this.ruleForm={
        SCHEDULETYPE: '',
        SCHEDULEOPTION: '',
        MANPRIORTYPE: 1,
        WARNANDDONE: '',
        SERVICEPRIORTYPE: 1,
      };
      if (this.$refs['ruleForm'] != undefined) {
        this.$refs['ruleForm'].resetFields(); 
        this.$refs['ruleForm'].clearValidate();
      }
    },
  }
};
</script>

<style lang="scss">
.planMaintain{
  .el-input{
    width: 100%;
  }
  .el-slider{
    width: 60%;
    display: inline-block;
    vertical-align: middle;
    .el-slider__bar{
      background: none;
    }
  }
}
</style>

<style  scoped lang="scss">
.planMaintain{
  .myp{
    width: 18%;
    display: inline-block;
    color: #606266;
  }
} 
</style>
